<template>
	<view class="con">
		<view class="ey same">
			<text>车牌号</text>
		</view>

		<up-input placeholder="请输入车牌号" border="surround" v-model="putvalue"></up-input>

		<view class="same">
			<up-button type="primary" text="查询" @click="getwark"></up-button>
		</view>
		
        <view class="same">
        	<up-button type="warning" text="新增里层" @click="getadd"></up-button>
        </view>

		<view class="wark" v-if="warklist.length>0">
		  <view class="trip" v-for="item in warklist" :key="item.id" @click="gotripde(item)">
		  	<text class="tp">车牌号: {{item.plateNo}}</text>
			<text class="tp">行驶日期: {{item.travelDate}}</text>
			<text class="tp">行驶里程: {{item.travelDistance}} 公里</text>
			<text class="tp">油量: {{item.gasFilling}} 升</text>
			<text class="tp">金额: {{item.amount}} 元</text>
		  </view>
			
		</view>

		<view v-show="show">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png" text='暂无车辆里程请添加里层信息 ' textSize='16'>
			<button class="mini-btn" type="warn" size="mini" @click="getadd">去添加</button>
            </u-empty>
		</view>
		
	</view>
</template>

<script setup>
	import {
		getconsumption
	} from '@/api/parkApi.js'
	import {
		ref
	} from 'vue';
	import{mylic} from '@/mock/park.js'

	const putvalue = ref() //车牌号
	const warklist = ref([]) //里层列表
	const show = ref(false) //搜索结果

    //点击里层看详情内容
	const gotripde=(val)=>{

		uni.navigateTo({
			url:`/pages/park/cart/consumption/tripde/tripde?trip=${JSON.stringify(val)}`
		})
	}

	//添加车辆里程
	const getadd = () => {
      uni.navigateTo({
      	url:'/pages/park/cart/consumption/trip/trip'
      })
	}

	//查询车辆里程	
	const getwark = async () => {
      
	  if(putvalue.value==null){
		  uni.showToast({
		  	title:'内容不能为空'
		  })
		  return
	  }
	
		show.value = false

		let res = await getconsumption({
			header: {
				'Authorization': uni.getStorageSync('token')
			},
			data: {
				plateNo: putvalue.value
			}
		})
		if (res.code == 200) {
			warklist.value = res.rows
			if (res.rows.length == 0) {
				show.value = true
			}
		}else{
			warklist.value=mylic(putvalue.value)
			 if (mylic(putvalue.value).length == 0) {
			 	show.value = true
			 }
		}
		console.log(warklist.value);
	}

</script>
<style lang="scss">
	.con {
		padding: 6px 10px;

		.ey {
			padding: 0px 4px;
			font-size: 16px;
			font-weight: 700;

		}

		.same {
			margin: 10px 0px;
		}
		
		::v-deep .u-empty{
			position: relative;
			
		
		}
		::v-deep .u-empty__text{
			position: absolute;
			top: 160px;
			left: 30px;
		}
		::v-deep .mini-btn{
			position: absolute;
			top: 167px;
			right:20px;
			

		}
		
		.trip{
			display: flex;
			flex-direction: column;
			font-weight: 600;
			font-size: 18px;
			color: #555555;
			padding: 8px;
			margin: 8px 0px;
			background-color: #d8eff5;
			border-radius: 12px;
			
		  .tp{
			 margin: 4px 0px; 
		  }
		}
	}
</style>